<template>
  <view class="index">
    <!-- 头部 -->
    <view class="header" :style="headerStyle">
      <view :style="'height: ' + statusBarHeight"> </view>
      <view class="header-info">
        <view class="title" :style="headerTextStyle">
          <view class="navleft">
            <image src="../../static/index/gps.png" mode="" class="navleft-img"></image>
            <view class="navposition" :style="headerdingwei" @tap="get_Location()">
              {{CityName}}
            </view>
          </view>
          <view class="navcent" @click="topsearch()">
            <u-search shape="round" height="25" bg-color="#FAFAFA" :show-action="false"></u-search>
          </view>
          <view class="navright">
            <image src="../../static/index/bank.png" mode="" class="navright-imgone"></image>
            <image src="../../static/index/plus.png" mode="" class="navright-imgtwo"></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <!-- 四个盒子 -->
    <view class="fourbox">
      <view class="boxone">
        <u-grid :col="4">
          <u-grid-item @click="tobooklook()">
            <image src="../../static/index/zhanghu.png" mode="" class="boxone-img"></image>
            <view class="boxone-tit">
              账户查询
            </view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/index/￥.png" mode="" class="boxone-img"></image>
            <view class="boxone-tit">
              转账汇款
            </view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/index/bao.png" mode="" class="boxone-img"></image>
            <view class="boxone-tit">
              贷款
            </view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/index/sao.png" mode="" class="boxone-img"></image>
            <view class="boxone-tit">
              扫一扫
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <!-- 四个盒子 -->
    <!-- banner图 -->
    <view class="bg">
      <image src="../../static/index/banner.png" mode="" class="bgimg"></image>
    </view>
    <!-- banner图 -->
    <!-- 金刚区 -->
    <view class="kernel">
      <view class="grid">
        <u-grid :col="5">
          <u-grid-item>
            <image src="../../static/index/funds.png" mode="" class="kernelimg"></image>
            <view class="kerneltext">
              信用卡申请
            </view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/index/funds.png" mode="" class="kernelimg"></image>
            <view class="kerneltext">
              储蓄卡申请
            </view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/index/funds.png" mode="" class="kernelimg"></image>
            <view class="kerneltext">
              生活缴费
            </view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/index/funds.png" mode="" class="kernelimg"></image>
            <view class="kerneltext">
              我要借钱
            </view>
          </u-grid-item>
          <u-grid-item>
            <image src="../../static/index/funds.png" mode="" class="kernelimg"></image>
            <view class="kerneltext">
              网点服务
            </view>
          </u-grid-item>
        </u-grid>
      </view>
      <u-grid :col="5">
        <u-grid-item>
          <image src="../../static/index/funds.png" mode="" class="kernelimg"></image>
          <view class="kerneltext">
            个人养老金
          </view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/index/funds.png" mode="" class="kernelimg"></image>
          <view class="kerneltext">
            存款产品
          </view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/index/funds.png" mode="" class="kernelimg"></image>
          <view class="kerneltext">
            理财产品
          </view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/index/funds.png" mode="" class="kernelimg"></image>
          <view class="kerneltext">
            政务服务
          </view>
        </u-grid-item>
        <u-grid-item @click="toindexmore()">
          <image src="../../static/index/funds.png" mode="" class="kernelimg"></image>
          <view class="kerneltext">
            更多
          </view>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 金刚区 -->
    <!-- 内容区 -->
    <view class="contentbg">
      <view class="content">
        <!-- swiper区 -->
        <view class="shadow"></view>
        <!-- 公告区 -->
        <view class="noticebox">
          <view class="noticeleft">
            <image src="../../static/index/tell.png" mode="" class="noticeimg"></image>

          </view>
          <view class="noticecent">
            活动
          </view>
          <view class="noticeline">

          </view>
          <view class="noticeright">
            撒打发撒啦啦啦十大萨达
          </view>
        </view>
        <!-- 公告区 -->
        <view class="swiperbox">
          <u-swiper :list="list1" :autoplay="true" :circular="true"></u-swiper>
        </view>
        <!-- swiper区 -->
        <!-- 财富精选区 -->
        <view class="wealthselectbox">
          <view class="wsb-tit">
            财富精选
          </view>
          <view class="wsb-threebox">
            <view class="threebox-item">
              <view class="jiaobox">
                <view class="jiao">
                  理财
                </view>
              </view>
              <view class="tb-item-tit">
                龙宝
              </view>
              <view class="tb-item-num">
                1.98%
              </view>
              <view class="tb-item-text">
                七日年化收益率
              </view>
            </view>
            <view class="threebox-item">
              <view class="jiaobox">
                <view class="jiao">
                  存款
                </view>
              </view>
              <view class="tb-item-tit">
                整村整取
              </view>
              <view class="tb-item-num">
                3.00%
              </view>
              <view class="tb-item-text">
                最高年利率
              </view>
            </view>
            <view class="threebox-item">
              <view class="jiaobox">
                <view class="jiao">
                  基金
                </view>
              </view>
              <view class="tb-item-tit">
                速盈
              </view>
              <view class="tb-item-num">
                2.2380%
              </view>
              <view class="tb-item-text">
                7日年化
              </view>
            </view>
          </view>
          <view class="wsb-twobox">
            <view class="twobox-item">
              <view class="wb-item-tit">
                资产配置
              </view>
              <view class="wb-item-text">
                点击一键配置
              </view>
            </view>
            <view class="twobox-item2">
              <view class="wb-item-tit">
                养老规划
              </view>
              <view class="wb-item-text">
                提前规划 养老无忧
              </view>
            </view>
          </view>
        </view>
        <!-- 财富精选区 -->
        <!-- 住房区 -->
        <view class="contentItem6 public">
          <view class="contentItem5_title contentItem6_title">
            住房
            <text>更多</text>
          </view>
          <view class="contentItem6_tab">
            <view class="tab_options" @click="changeTab(1)"
              :class="[showTab == 1 ? 'tabTitleStyle' : 'tab_options_false']">
              <view class="tab_options_title">
                住房服务<p style="font-size: 25rpx;">在线操作资金安全</p>
              </view>
            </view>
            <view class="tab_options" @click="changeTab(2)"
              :class="[showTab == 2 ? 'tabTitleStyle2' : 'tab_options_false2']">
              <view class="tab_options_title">
                租房服务<p style="font-size: 25rpx;">查看房源在线签约</p>
              </view>
            </view>
          </view>
          <view class="contentItem6_tabItem">
            <view class="tabItem1" v-show="showTab == 1">
              <view class="tabItem1_row1">
                <view class="tabItem1_row1_left">
                  <image src="../../static/index/sao2.png" mode="widthFix"></image>
                  <view class="tabItem1_row1_left_word1">
                    扫码申请贷款
                    <p>快捷申请 放心无忧</p>
                  </view>
                </view>
                <view class="tabItem1_row1_left">
                  <image src="../../static/index/zhang.png" mode="widthFix"></image>
                  <view class="tabItem1_row1_left_word1">
                    我的贷款
                    <p>货款信息 一键查询</p>
                  </view>
                </view>
              </view>
              <view class="tabItem1_row2">
                <view class="tabItem1_row2_item">
                  房贷计算器
                  <p>智能估算仅供参考</p>
                </view>
                <view class="tabItem1_row2_item">
                  还款计划调整
                  <p>还款调整一键查询</p>
                </view>
                <view class="tabItem1_row2_item">
                  利率查询
                  <p>贷款利率随时查询</p>
                </view>
              </view>
            </view>
            <view class="tabItem2" v-show="showTab == 2">
              <view class="tabItem2_row1_rent">
                我要租房
                <text>智能找房 在线签约</text>
                <view>进入专区></view>
              </view>
              <view class="tabItem2_row1_me">
                <view class="tabItem2_row1_meItem1">
                  我要出租
                  <p>全程服务 快速出租</p>
                </view>
                <view class="tabItem2_row1_meItem1">
                  我要缴租
                  <p>方便快捷 资金安全</p>
                </view>
              </view>
            </view>
          </view>
          <view class="bankBanner">
            <image src="../../static/index/bottomBanner.png" mode="widthFix"></image>
          </view>
        </view>
        <!-- 住房区 -->
        <!-- 优惠专区 -->
        <view class="favourbox">
          <view class="fav-tit">
            优惠专区
          </view>
          <view class="fav-twobox">
            <view class="favourleft">
              <image src="../../static/index/count3.png" mode="" class="fav-left-img"></image>
            </view>
            <view class="favourright">
              <image src="../../static/index/count1.png" class="fav-right-img" mode=""></image>
              <image src="../../static/index/count2.png" class="fav-right-img" mode=""></image>
            </view>
          </view>
        </view>
        <!-- 优惠专区 -->
      </view>
    </view>
    <!-- 内容区 -->
  </view>
</template>
<script>
  export default {
    data() {
      return {
        CityName: '泰安市',
        showTab: 1,
        list1: ['/static/index/swiper1.png',
          '/static/index/swiper2.png'
        ],
        appData: {},
        headerData: {
          bgColor: "",
          textColor: "",
          dingwei: "",
        }
      }
    },
    // 获取定位方法
    getLocationInfo() {
      let _this = this;
      uni.getLocation({
        type: 'gcj02',
        success(res) {
          let lat = res.latitude;
          let lng = res.longitude;
          let key =
            'M7XBZ-2TBKJ-TPBFS-KV3RM-F5QQF-OFFNV'; //申请地址：https://lbs.qq.com/dev/console/application/mine
          uni.request({
            url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng +
              '&key=' + key,
            method: "GET",
            success(ress) {
              let data = ress.data;
              let CityName = ress.data.result.address_component.city;
              _this.CityName = CityName
              uni.setStorage({
                key: 'City_Name',
                data: CityName
              });
            },
            fail() {
              uni.showToast({
                'title': '对不起，数据获取失败！',
                'icon': 'none'
              })
            }
          })
        },
        fail(res) {
          uni.showToast({
            'title': '对不起，获取位置失败！',
            'icon': 'none'
          })
        }
      })
    },
    computed: {
      navigationBarHeight() {
        return (this.appData.statusBarHeight * 2 + 88) + 'rpx'
      },
      statusBarHeight() {
        return (this.appData.statusBarHeight * 2 + 4) + 'rpx'
      },
      headerStyle() {
        return `height:${(this.appData.statusBarHeight * 2 + 88) + 'rpx'};background:${this.headerData.bgColor}`
      },
      headerTextStyle() {
        return `color:${this.headerData.textColor}`
      },
      headerdingwei() {
        return `color:${this.headerData.dingwei}`
      },

    },
    onShow() {
      const res = uni.getSystemInfoSync()
      this.appData = res;
    },
    onLoad() {
      let _this = this;
      uni.$on('getCityName', function(res) {
        _this.CityName = res
      });
    },
    methods: {
      topsearch() {
        uni.navigateTo({
          url: "/pages/index/search"
        })
      },
      tobooklook() {
        uni.navigateTo({
          url: "/pages/index/bookLook"
        })
      },
      toindexmore() {
        uni.navigateTo({
          url: '/pages/index/indexMore'
        })
      },
      changeTab(e) {
        this.showTab = e
      },
      get_Location() {
        uni.navigateTo({
          url: '/pages/Location/Location'
        })
      },
      onPageScroll(e) {
        if (e.scrollTop >= this.appData.statusBarHeight) {
          this.headerData.bgColor = '#fff'
          this.headerData.textColor = '#000'
          this.headerData.dingwei = '#000'
        } else {
          this.headerData.bgColor = ''
          this.headerData.textColor = ''
          this.headerData.dingwei = ''
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  // 头部
  .bg {

    image {
      width: 100%;
    }
  }

  .header {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    transition: all .5s;
    background: rgba(255, 255, 255, 0);

    .header-info {
      height: 88rpx;
      margin-top: 30rpx;

      .title {
        display: flex;
        width: 100vw;
        padding: 0 15rpx;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        transition: all .5s;

        .navleft {
          display: flex;
          width: 25vw;
          height: 50rpx;

          .navleft-img {
            padding: 10rpx 0;
            width: 20rpx;
            height: 30rpx;
          }

          .navposition {
            color: white;
            font-weight: 520;
            font-size: 38rpx;
            padding-left: 8rpx;
            border: none;
          }
        }

        .navcent {
          width: 50vw;
          height: 50rpx;
        }

        .navright {
          display: flex;
          justify-content: space-around;
          width: 28vw;
          height: 50rpx;

          .navright-imgone {
            width: 50rpx;
            height: 50rpx;
          }

          .navright-imgtwo {
            width: 50rpx;
            height: 50rpx;
          }
        }
      }

    }
  }

  // 头部
  // 总页面
  .index {
    // position: relative;
  }

  // 总页面
  // 四个盒子
  .fourbox {
    position: absolute;
    top: 180rpx;
    left: 37.5rpx;
    z-index: 10;
    width: 90vw;
    height: 150rpx;
    // background-color: #FFFFFF;

    .boxone-img {
      width: 90rpx;
      height: 90rpx;
      margin-bottom: 15rpx;
    }

    .boxone-tit {
      color: white;
    }

  }

  // 四个盒子
  // banner图
  .bgimg {
    height: 56vh;
    position: relative;
  }

  .kernel {
    position: absolute;
    top: 42vh;
    left: 37.5rpx;
    width: 90vw;
    background-color: #FFFFFF;
    border-radius: 3%;
    margin: auto;
  }

  // banner图
  // 金刚区
  .kernel {
    box-sizing: border-box;
    padding: 50rpx 20rpx;

    .grid {
      padding-bottom: 30rpx;
    }

    .kernelimg {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 20rpx;
    }

    .kerneltext {
      font-size: 24rpx;
    }
  }

  // 金刚区
  // 内容区
  .contentbg {
    width: 100vw;
    background-color: #F6F6F6;
  }

  .content {
    margin: auto;
    padding-top: 185rpx;
    width: 90vw;
    // height: 600rpx;
    background-color: #F6F6F6;
  }

  // swiper区
  .shadow {
    height: 12rpx;
    width: 100%;
  }

  // 公告区
  .noticebox {
    width: 100%;
    margin: auto;
    margin-top: 30rpx;
    height: 90rpx;
    background-color: white;
    border-radius: 20rpx;
    padding: 25rpx;
    box-sizing: border-box;
    display: flex;
    // justify-content: space-between;

    .noticeleft {
      width: 10%;
      height: 100%;

      .noticeimg {
        width: 37rpx;
        height: 37rpx;
      }

    }

    .noticecent {
      width: 15%;
      font-weight: bold;
    }

    .noticeline {
      margin-right: 30rpx;
      margin-top: 10rpx;
      // line-height: 90rpx;
      height: 50%;
      // background-color: #E6E6E9;
      border-right: solid 1px #E6E6E9;
    }

    .noticeright {
      width: 60%;
    }
  }

  // 公告区

  .swiperbox {
    width: 100%;
    // height: 300rpx;
    margin-top: 30rpx;
    box-sizing: border-box;
    // background-color: aqua;
  }

  // swiper区
  // 财富精选区

  .wealthselectbox {
    margin-top: 20rpx;
    width: 100%;
    // height: 600rpx;
    background-color: white;
    border-radius: 10rpx;
    padding: 20rpx;
    box-sizing: border-box;

    .wsb-tit {
      font-size: 50rpx;
      font-weight: bold;
    }

    .wsb-threebox {
      display: flex;
      justify-content: space-between;

      .threebox-item {
        margin-top: 30rpx;
        width: 30%;
        height: 200rpx;
        border-radius: 20rpx;
        background-image: linear-gradient(to right bottom, #EFEFEF, #FDFDFD, #fff);


        .jiaobox {
          margin-top: -8rpx;
          margin-left: 64%;
        }

        .jiao {
          border-top-right-radius: 20rpx;
          border-bottom-left-radius: 20rpx;
          font-size: 24rpx;
          display: inline;
          color: white;
          padding: 0 10rpx;
          padding-bottom: 10rpx;
          background-color: #2241B9;
        }

        .tb-item-tit {
          margin-top: 10rpx;
          text-align: center;
          font-weight: bold
        }

        .tb-item-num {
          margin-top: 10rpx;
          text-align: center;
          font-weight: bold;
          font-size: 40rpx;
          color: #DF7E2D;
        }

        .tb-item-text {
          color: #626262;
          margin-top: 10rpx;
          text-align: center;
          font-size: 26rpx;
        }
      }
    }

    .wsb-twobox {
      display: flex;
      justify-content: space-between;

      .twobox-item {
        box-sizing: border-box;
        padding: 15rpx;
        border-radius: 10rpx;
        margin-top: 20rpx;
        width: 48%;
        height: 160rpx;
        background-image: linear-gradient(to right, #EFEFEF, #fff);

        .wb-item-tit {
          font-size: 40rpx;
          font-weight: bold;
        }

        .wb-item-text {
          margin-top: 20rpx;
          color: #959699;
        }
      }

      .twobox-item2 {
        border-radius: 10rpx;
        margin-top: 20rpx;
        width: 48%;
        height: 160rpx;
        padding: 15rpx;
        box-sizing: border-box;
        background-image: linear-gradient(to right, #FBE9DF, #fff);

        .wb-item-tit {
          font-size: 40rpx;
          font-weight: bold;
        }

        .wb-item-text {
          margin-top: 20rpx;
          color: #959699;
        }
      }
    }
  }

  // 财富精选区
  // 住房区
  .contentItem5_title {
    font-size: 36rpx;
    font-weight: bold;
    position: relative;
    top: 30rpx;
    left: 20rpx;
    margin-bottom: 60rpx;
  }

  .contentItem6 {
    margin-top: 20rpx;
    padding-bottom: 2rpx;
    background-color: white;
  }

  .contentItem6_title {
    position: relative;
    width: 93%;
  }

  .contentItem6_tab {
    display: flex;
    justify-content: space-around;
  }

  .tabTitleStyle {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    width: 50%;
    color: #2D41A1;
    padding: 40rpx 0;
    background: url("@/static/index/tabBgimgLeft.png") no-repeat;
    background-size: 105% 100%;
  }

  .tabTitleStyle2 {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    width: 50%;
    color: #2D41A1;
    padding: 40rpx 0;
    background: url("@/static/index/tabBgimgRight.png") no-repeat;
    background-size: 105% 100%;
  }


  .tab_options_false {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    width: 38%;
    padding: 40rpx 0;
    box-sizing: border-box;
    border-radius: 20rpx;
    background-image: linear-gradient(to left, #fff, #EFEFEF);
  }

  .tab_options_false2 {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    width: 38%;
    padding: 40rpx 0;
    box-sizing: border-box;
    border-radius: 20rpx;
    background-image: linear-gradient(to right, #fff, #EFEFEF);
  }

  .tabTitleStyle .tab_options_title {
    position: relative;
    left: -42rpx;
  }

  .tabTitleStyle2 .tab_options_title {
    position: relative;
    right: -61rpx;
  }

  .tab_options_false .tab_options_title {
    position: relative;
    left: 20rpx;
  }

  .tabTitleStyle p {
    font-size: 25rpx;
  }

  .tabItem1_row1 {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 20rpx;
  }

  .tabItem1_row1_left {
    display: flex;
    justify-content: space-around;
    background-color: #F6F9FE;
    border-radius: 10rpx;
  }

  .tabItem1_row1_left image {
    width: 50rpx;
    margin: 50rpx 10rpx 0 30rpx;
  }

  .tabItem1_row1_left_word1 {
    font-size: 30rpx;
    font-weight: bold;
    color: #2D41A1;
    line-height: 50rpx;
    margin: 26rpx 30rpx 26rpx 10rpx;
  }

  .tabItem1_row1_left_word1 p {
    font-size: 25rpx;
    color: #506EB7;
  }

  .tabItem1_row2 {
    width: 96%;
    margin: auto;
    display: flex;
    justify-content: space-around;
  }

  .tabItem1_row2_item {
    font-size: 30rpx;
    line-height: 50rpx;
    border: 2rpx solid #EDEDED;
    padding: 20rpx 10rpx;
    border-radius: 10rpx;
    box-sizing: ;
    margin: 20rpx 0;
  }

  .tabItem1_row2_item p {
    color: #959595;
    font-size: 25rpx;
  }

  .tabItem2_row1_rent {
    width: 96%;
    margin: auto;
    margin-top: 20rpx;
    background-color: #F6F9FE;
    border-radius: 10rpx;
    color: #24399D;
    font-weight: bold;
    font-size: 32rpx;
    background-color: #F4F9FF;
    padding: 20rpx 0 15rpx 40rpx;
    box-sizing: border-box;
  }

  .tabItem2_row1_rent text {
    font-size: 20rpx;
    margin-left: 40rpx;
    color: #476EB8;
  }

  .tabItem2_row1_rent view {
    background-color: #1F3DB6;
    color: #fff;
    width: 120rpx;
    font-size: 20rpx;
    text-align: center;
    padding: 5rpx 20rpx;
    border-radius: 20px;
    font-weight: normal;
    margin: 20rpx 0;
  }

  .tabItem2_row1_me {
    display: flex;
    justify-content: space-around;
    margin-top: 20rpx;
  }

  .tabItem2_row1_meItem1 {
    font-weight: bold;
    border: 2rpx solid #F0F0F0;
    border-radius: 10rpx;
    padding: 20rpx 0 35rpx 30rpx;
    font-size: 34rpx;
    line-height: 40rpx;
    width: 40%;
    margin: 10rpx 0 17rpx 0;
  }

  .tabItem2_row1_meItem1 p {
    color: #959595;
    font-size: 25rpx;
  }

  .bankBanner {
    width: 95%;
    margin: 30rpx auto;
  }

  .bankBanner image {
    width: 100%;
  }

  // 住房区
  // 优惠专区
  .favourbox {
    border-radius: 20rpx;
    margin-top: 20rpx;
    width: 100%;
    padding: 20rpx;
    background-color: #fff;

    .fav-tit {
      font-size: 50rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
    }

    .fav-twobox {
      display: flex;
      justify-content: space-between;
    }

    .favourleft {
      width: 48%;

      .fav-left-img {
        width: 100%;
        height: 300rpx;
      }
    }

    .favourright {
      width: 48%;

      .fav-right-img {
        width: 100%;
        height: 140rpx;
        margin-bottom: 10rpx;
      }
    }
  }

  // 优惠专区
  // 内容区
</style>